

<script>
export default {
  name: 'Preview',
  props: {
    params: Array
  },
  data() {
    return {
      myParams: []
    };
  },
  mounted() {
    this.myParams = JSON.parse(JSON.stringify(this.params));
  },
  methods: {
    getStyle(style) {
      if (style) {
        return style.map((item) => {
          return {
            [item.label]: item.value
          };
        });
      }
    },
    getDom(params) {
      return params.map((item) => {
        let [options, config, componentName, slot] = [
          item['__options__'],
          item['__config__'],
          item['__componentName__'],
          item['__slot__']
        ];
        const Tag = config.tag;
        let slotTag = '';
        // input
        // eslint-disable-next-line no-debugger
        if (componentName === 'inputComponent') {
          slotTag = (
            <div>
              {slot.prepend ? (
                <template slot="prepend">{slot.prepend}</template>
              ) : (
                ''
              )}
              {slot.append ? (
                <template slot="append">{slot.append}</template>
              ) : (
                ''
              )}
            </div>
          ).children;
          // 文本输入框
        } else if (componentName === 'inputTextarea') {
          options.autosize = options.autosizeAuto || options.autosize;
          // 单选
        } else if (componentName === 'radioComponent') {
          slotTag = slot.options.map((item) => {
            return <el-radio {...{ attrs: item }}>{item.value}</el-radio>;
          });
          // 多选
        } else if (componentName === 'checkboxComponent') {
          slotTag = slot.options.map((item) => {
            return <el-checkbox {...{ attrs: item }}>{item.value}</el-checkbox>;
          });
          // 下拉选
        } else if (componentName === 'selectComponent') {
          slotTag = slot.options.map((item) => {
            return <el-option {...{ attrs: item }}></el-option>;
          });
        } else if (componentName === 'cardComponent') {
          slotTag = (
            <div>
              {slot.left ? (
                <template slot="left">
                  {slot.left.map((item) => {
                    return (
                      <item.tag
                        style="margin-left:5px"
                        v-model={item.vModel}
                        {...{ attrs: { ...item.options } }}
                      >
                        {item.text || ''}
                      </item.tag>
                    );
                  })}
                </template>
              ) : (
                ''
              )}
              {slot.right ? (
                <template slot="right">
                  {slot.right.map((item) => {
                    return (
                      <item.tag
                        style="margin-left:5px"
                        v-model={item.vModel}
                        {...{ attrs: { ...item.options } }}
                      >
                        {item.text || ''}
                      </item.tag>
                    );
                  })}
                </template>
              ) : (
                ''
              )}
            </div>
          ).children;
        }
        // 有子组件，但子组件没有元素时，需清空本身
        if (config.children && config.children.length === 0) {
          if (componentName === 'cardComponent') {
            return (
              <el-col span={config.span}>
                <card-component
                  title={options.title}
                  cardStyle={options.cardStyle}
                >
                  {this.getDom(config.children)}
                  {slotTag}
                </card-component>
              </el-col>
            );
          } else {
            return '';
          }
        } else {
          let resultTag = '';
          if (componentName === 'cardComponent') {
            resultTag = (
              <el-row
                slot="content"
                span={config.span}
                style={this.getStyle(options.cardStyle)}
              >
                {this.getDom(config.children)}
                {slotTag}
              </el-row>
            );
          } else {
            resultTag =
              config.children && config.children.length > 0
                ? this.getDom(config.children)
                : slotTag;
          }
          return (
            <el-col span={config.span}>
              <el-form-item
                label={config.showLabel ? config.label : ''}
                label-width={
                  config.labelWidth > 0 && config.showLabel
                    ? config.labelWidth + 'rem'
                    : '0'
                }
              >
                <Tag
                  {...{
                    attrs: { ...options },
                    class: options.className,
                    style: this.getStyle(options.style)
                  }}
                  v-model={item['__vModel__']}
                >
                  {componentName === 'buttonComponent' ? options.text : ''}
                  {resultTag}
                </Tag>
              </el-form-item>
            </el-col>
          );
        }
      });
    }
  },
  render() {
    if (this.myParams.length) {
      return (
        <el-row gutter={15} class="preview">
          {this.getDom(this.myParams)}
        </el-row>
      );
    } else {
      return '';
    }
  }
};
</script>

<style lang="scss" scoped>
.preview {
  border: none !important;
  ::v-deep {
    .el-form-item {
      width: 100%;
      margin-bottom: 0;
    }
    .el-row {
      min-height: 0 !important;
      border: none !important;
    }
    .el-col {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .label {
        width: 200px;
        text-align: right;
        margin-right: 15px;
      }
    }
  }
}
</style>